<template>
  <a-drawer
    :visible="visible"
    title="员工权限角色"
    placement="right"
    width="50%"
    :destroyOnClose="true"
    @close="handleCancel"
    :maskClosable="false"
    :forceRender="true">
    <div v-if="treeData.length > 0">
      <a-tree
        v-if="!treeOnLoad"
        :tree-data="treeData"
        draggable
        blockNode
        v-model="checkedKeys"
        :defaultExpandAll="true"
        :replaceFields="replaceFields"
        checkable
        :selected-keys="selectedKeys"
        :autoExpandParent="true"
        :defaultExpandedKeys="treeData"
        @check="onCheck"
        @select="onSelect">
        <template v-slot:title="nodeData">
          <div>{{ nodeData.name }}</div>
        </template>
      </a-tree>
    </div>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }">
      <a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
      <a-button
        type="primary"
        @click="handleOk"
        :visible="visibleBtn"
        :loading="loadingBtn"
        v-checkBtn="'staff:role:edit'">保存</a-button>
    </div>
  </a-drawer>
</template>
<script>
import { editEmployeesRole, detailEmployees } from '@/api/staff'
import { getRoles } from '@/api/lessee'
export default {
    data () {
        return {
            visible: false,
            loadingBtn: false,
            visibleBtn: false,
            // 树状图
            treeOnLoad: false,
            replaceFields: {
                children: 'children',
                title: 'name',
                key: 'roleId',
                value: 'roleId'
            },
            treeData: [],
            selectedKeys: [],
            checkedKeys: [],
            parameter: {
                employeeId: null,
                checkedKeys: []
            }
        }
    },
    mounted () {
        // getRoles().then(res => {
        //     if (res.code == 200) {
        //         this.treeData = res.data
        //     }
        // })
    },
    methods: {
        // 显示
        open (row) {
            this.parameter.employeeId = row.partyId
            const _this = this
            getRoles().then(res => {
                if (res.code == 200) {
                    this.treeData = res.data
                    if (res.data.length == 0) {
                        this.$notification['error']({
                            message: '提示',
                            description: '角色数据为空,请添加相关角色',
                            duration: 8
                        })
                        return
                    }
                    detailEmployees(row.partyId).then(res => {
                        if (res.code == 200) {
                            let roles = res.data.roles
                            // console.log(JSON.stringify(res.data))
                            // if(JSON.stringify(res.data)=='[]') return
                            if (roles.length > 0) {
                                roles = roles.map(item => item.roleId)
                                _this.parameter.checkedKeys = roles
                                _this.checkedKeys = roles
                            }
                            // this.addForm = res.data;
                        }
                    })
                }
            })

            console.log(row)
            this.visible = true
        },
        // 选择的权限
        onCheck (checkedKeys) {
            this.checkedKeys = checkedKeys
            this.parameter.checkedKeys = checkedKeys
        },
        onSelect (selectedKeys, info) {
            this.selectedKeys = selectedKeys
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            editEmployeesRole(this.parameter).then(res => {
                if (res.code === 200) {
                    this.$notification['success']({
                        message: '提示',
                        description: '保存成功！',
                        duration: 8
                    })
                    this.visible = false
                    this.$emit('success')
                } else {
                    this.$notification['error']({
                        message: '提示',
                        description: res.message,
                        duration: 8
                    })
                }
                this.visibleBtn = false
                this.loadingBtn = false
            })
        }
    }
}
</script>
<style scoped></style>
